<template>
	<el-dialog
		:visible="showDialog"
		:append-to-body="true"
		:close-on-click-modal="false"
		title="组合命令配置"
		width="900px"
		@close="dialogCancel">
    <el-button type="primary" size="small" class="mar-btm-10" @click="addScenes">新增组合命令</el-button>
    <el-table :data="roomScenesData" border class="mar-btm">
      <el-table-column prop="name" label="名称">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" size="small" placeholder="输入组合命令名称"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="sceneId" label="唯一标识">
        <template slot-scope="scope">
          <el-input v-model="scope.row.sceneId" size="small" placeholder="输入组合命令唯一标识"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button size="mini" @click="copyRow(scope.$index, scope.row)">复制</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
	  <div class="flex-justify-end">
		  <el-button type="info" @click="dialogCancel"><span class="mar-lft-rgt-10">取消</span></el-button>
		  <el-button type="primary" class="mar-lft-10" @click="dialogSubmit"><span class="mar-lft-rgt-10">保存</span></el-button>
	  </div>
  </el-dialog>
</template>
<script>
  import {confirmHandle, messageHandle, generateUID} from "@/utils";
  import {msgCode} from "@/config/string";
  import _ from "lodash";

  export default {
	  name: 'GlobalScenes',
	  model: {
		  prop: 'showDialog',
		  event: 'change'
	  },
    props: {
	    showDialog: {
		    type: Boolean,
		    default: false
	    },
      scenes: {
        type: Array,
        default: () => {
          return [];
        }
      }
    },
    data() {
      return {
        roomScenesData: [],
      }
    },
	  watch: {
		  showDialog() {
			  this.roomScenesData = _.cloneDeep(this.scenes);
		  },
	  },
    methods: {
      addScenes() {
        this.roomScenesData.push({
          name: '',
          key: `roomScenes-${generateUID()}`,
          sceneId: ''
        });
      },
      copyRow(index, row) {
        const data = _.cloneDeep(row);
        data.key = `roomScenes-${generateUID()}`;
        this.roomScenesData.splice(index + 1, 0, data);
      },
      handleDelete(index, row) {
        confirmHandle({label: `确定要删除命令：${row.name} 吗?`}).then(() => {
          this.roomScenesData.splice(index, 1);
          messageHandle({code: msgCode.DELETE_SUCCESS, title: "命令"});
        }).catch(() => {
        });
      },
	    dialogCancel() {
		    this.$emit('change', false);
	    },
	    dialogSubmit() {
        this.$emit('submit', this.roomScenesData);
      },
    }
  }
</script>
